<template>
  <div class="data-view">
    <el-card>
      <div id="main1"></div>
    </el-card>
    <el-card>
      <div id="main2"></div>
    </el-card>
  </div>
</template>
<script>
import { getdataview } from "@/api/api.js";
export default {
  data() {
    return {};
  },
  mounted() {
    let myChart = this.$echarts.init(document.getElementById("main1"));
    myChart.setOption({
      title: {
        text: "前端进阶班",
      },
      tooltip: {},
      xAxis: {
        data: ["一班", "二班", "三班", "四班", "五班"],
      },
      yAxis: {},
      series: [
        {
          name: "人数",
          type: "bar",
          data: [45, 42, 48, 52, 47],
        },
      ],
    });
    getdataview().then((res) => {
      if (res.data.status === 200) {
        let { legend, series, xAxis } = res.data.data;
        console.log(legend, series, xAxis);

        let myChart1 = this.$echarts.init(document.getElementById("main2"));
        myChart1.setOption({
          title: {
            text: "会话量",
          },
          tooltip: {},
          legend: {
            data: legend,
          },
          xAxis: {
            type: "category",
            data: xAxis,
          },
          yAxis: {},
          series: series,
        });
      }
    });
  },
};
</script>
<style lang="less" scoped>
.data-view {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .el-card {
    width: 50%;
    #main1,
    #main2 {
      height: 500px;
    }
  }
}
</style>